<template>
	<view class="container">
		<view class="title">
			我的账户
		</view>
		<view class="balanceBanner">
			<view class="bannerLeft">
				<image src="../static/images/share_commission.png" mode="aspectFit" class="bannerImg"></image>
				<view class="balance">
					我的余额
				</view>
			</view>
			<view class="bannerRight">
				￥{{userDetail.userMoney}}
			</view>
		</view>
		<view class="title">
			选择套餐
		</view>

		<view class="account">
			<view class="gridItem" v-for="(item,index) in accounts" :key="index">

				<!-- <button v-if="userInfo && !userInfo.openid" open-type="getUserInfo" @getuserinfo="pay(item)">
					<image :src="item.imageFile" mode="aspectFit"></image>
				</button>
				<view v-if="userInfo && userInfo.openid" @click="pay(item)">
					<image :src="item.imageFile"  mode="aspectFit"></image>
				</view> -->
				<!-- <view class="payBtn" @click="pay"> -->
				
				<view @click="pay(item)">
					<image :src="item.imageFile"  mode="aspectFit"></image>
				</view>

				<!-- <view :class="['gridInner',selectAccount==item.price?'unAcctive':'innerAcctive']" @click="chooseAccount(item)">
					<view :class="['score',selectAccount==item.name?'activeBo':'unActiveBo']">
						{{item.price}}元
					</view>
					<view class="ticket">
						{{item.name}}{{item.rechargeNum}}个
					</view>
				</view> -->
			</view>
		</view>
		<!-- #ifdef MP -->
		<!-- <button v-if="userInfo && !userInfo.openid" class="payBtn" open-type="getUserInfo" @getuserinfo="pay"> -->
		<!-- 充值 -->
		<!-- </button> -->
		<!-- <view v-if="userInfo && userInfo.openid" class="payBtn" @click="pay"> -->
		<!-- 充值 -->
		<!-- </view> -->
		<!-- <view class="payBtn" @click="pay"> -->
		<!-- #endif -->
		
		<view class="content-footer">
			<view class="payBtn" @click="pay">充值</view>
		</view>

	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icons/uni-icons"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				userDetail: {},
				hasToken: '',
				userInfo: {},
				trade_no: '',
				allowCommit: true,
				banlance: 0,
				accounts: [],
				selectAccount: '',
				selectItemId: '',
				currentType: 'recharge',
				currentPage: 1,
				totalPage: 0,
				turnovers: []
			};
		},
		onLoad() {
			this.loadData()
			if (uni.getStorageSync('userDetail')) {
				this.userDetail = uni.getStorageSync('userDetail')
			}
		},
		onShow() {

		},
		onReachBottom() {
			if (this.currentPage < this.totalPage) {
				this.currentPage++
			}
		},
		onShareAppMessage(res) {
			return this.$share()

		},
		methods: {
			chooseType(val) {
				this.currentType = val
			},
			//初始化数据
			chooseAccount(item) {
				this.selectAccount = item.price
				this.selectItemId = item.id
			},

			//充值
			pay(item) {
				let _this = this
				this.selectAccount = item.price
				this.selectItemId = item.id
				// if (this.selectAccount == "") {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: "请先选择充值金额"
				// 	})
				// 	return
				// }
				// if (!this.allowCommit) {
				// 	return
				// }
				// this.allowCommit = false
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						let code = loginRes.code
						// 设置用户openid
						_this.$Request.request('/api/users/openid', 'POST', {
							code
						}, true).then(res => {
							if (res.status == 1) {
								// 获取微信支付信息
								let params = {
									payObj: 'recharge',
									targetType: 0,
									needPay: _this.selectAccount,
									payCoce: 'weixinpays',
									itemId: _this.selectItemId,
									// trade_no: _this.trade_no
								}

								_this.$Request.request('/api/weixinpays/toWeixinPay', 'POST', params, true).then(res => {
									console.log(res)
									uni.requestPayment({
										...res.data,
										success: function(res) {
											// console.log(res)
											_this.$api.msg("充值成功!")
											setTimeout(() => {
												uni.navigateBack()
											}, 800)
										}
									})
								}).catch(err => {
									console.log(err)
								})
							}

						}).catch(err => {
							console.log(err)
						})
					}
				});
			},
			loadData() {
			//	// #ifdef MP
				// uni.getUserInfo({
				// 	provider: 'weixin',
				// 	success: (res) => {
				// 		console.log(res)
				// 	}
				// })
			// 	// #endif
			//	// #ifdef APP-VUE

			//	// #endif

				let _this = this
				this.$Request.request('/api/user_center/rechargePageInfo', 'GET', {}, true).then(res => {
					console.log(res)
					if (res.status == 1) {

						_this.accounts = res.data.rechargeItems
						// console.log(_this.accounts)
					}
					// _this.trade_no = res.data.trade_no
				}).catch(err => {
					console.log(err)
				})

				this.$Request.request('/api/users/getUserInfo', 'GET', {}, true).then(res => {
					console.log(res)
					if (res.status == 1) {

						this.userInfo = res.data.userinfo
						this.banlance = res.data.userinfo.pv_credit
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./reCharge.scss"
</style>
